/*
 Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
 SPDX-License-Identifier: Apache-2.0
*/

@use '../../styles' as styles;
@use '../../styles/tokens' as awsui;
@use '@cloudscape-design/component-toolkit/internal/focus-visible' as focus-visible;
@use '../../../token/constants' as token;

@use './motion';

$padding-inline-inner-filtering-token: styles.$control-padding-horizontal;
$padding-block-inner-filtering-token: 0px;

.button-trigger {
  @include styles.styles-reset;

  position: relative;
  display: flex;
  inline-size: 100%;
  justify-content: space-between;
  align-items: center;
  padding-block: styles.$control-padding-vertical;
  padding-inline: styles.$control-padding-horizontal;

  background-color: awsui.$color-background-input-default;
  border-start-start-radius: styles.$control-border-radius;
  border-start-end-radius: styles.$control-border-radius;
  border-end-start-radius: styles.$control-border-radius;
  border-end-end-radius: styles.$control-border-radius;
  border-block: awsui.$border-width-field solid awsui.$color-border-input-default;
  border-inline: awsui.$border-width-field solid awsui.$color-border-input-default;
  min-block-size: awsui.$size-vertical-input;

  &.in-filtering-token-root,
  &.in-filtering-token-nested {
    padding-block: $padding-block-inner-filtering-token;
    padding-inline: $padding-inline-inner-filtering-token;
    border-block-width: awsui.$border-width-token;
    border-inline-width: awsui.$border-width-token;

    border-color: token.$token-border-color;
    border-start-end-radius: 0;
    border-end-end-radius: 0;
    block-size: 100%;
    min-block-size: unset;

    @include focus-visible.when-visible {
      @include styles.focus-highlight(awsui.$space-filtering-token-operation-select-focus-outline-gutter);
    }
  }

  &.in-filtering-token-nested {
    border-start-start-radius: calc(#{styles.$control-border-radius} / 2);
    border-end-start-radius: calc(#{styles.$control-border-radius} / 2);
  }

  &.has-caret {
    padding-inline-end: styles.$control-icon-horizontal-padding;
  }

  > .placeholder {
    @include styles.form-placeholder;
  }

  > .arrow {
    position: absolute;
    inset-inline-end: styles.$control-icon-horizontal-offset;
    inset-block-start: styles.$control-icon-vertical-offset;
    color: awsui.$color-text-button-inline-icon-default;
  }

  &:hover {
    > .arrow {
      color: awsui.$color-text-button-inline-icon-hover;
    }
  }

  &.pressed {
    > .arrow {
      transform: rotate(-180deg);
    }
  }

  &.disabled {
    @include styles.form-disabled-element;

    > .arrow {
      color: awsui.$color-text-button-inline-icon-disabled;
    }

    &.in-filtering-token {
      // select in property filter has different border style
      @include styles.button-trigger-disabled-element;
      border-color: awsui.$color-border-control-disabled;
    }

    > .placeholder {
      @include styles.form-placeholder-disabled;
    }
  }

  // read-only in-filtering-token (i.e. for property filter readOnlyOperations)
  // should retain standard borders, only the icon changes
  &.readonly:not(&.disabled):not(&.in-filtering-token) {
    @include styles.form-readonly-element;
  }

  &:focus {
    outline: none;
    text-decoration: none;
  }

  &:not(.in-filtering-token) {
    @include focus-visible.when-visible {
      @include styles.form-focus-element();
    }

    &:invalid {
      // discard built-in invalid styles, customers should use `invalid` property only (AWSUI-3947)
      box-shadow: none;
    }

    &.invalid,
    &.invalid:focus {
      @include styles.form-invalid-control();
    }

    &.warning,
    &.warning:focus {
      @include styles.form-warning-control();
    }
  }

  &.inline-tokens {
    // Remove default paddings and just rely on center alignment of the content
    padding-block: 0;
  }
}
